<!DOCTYPE html>
<html ng-app="wecare">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>We Care</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <meta name="msapplication-tap-highlight" content="no"/>

        <link rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="visual/css/main.css" type="text/css">

        <script src="vendors/jquery/jquery.min.js" type="text/javascript"></script>
        <script src="vendors/hammerjs/hammer.js" type="text/javascript"></script>
        <script src="vendors/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="vendors/angularjs/angular.min.js" type="text/javascript"></script>
        <script src="vendors/jschart/jscharts.js" type="text/javascript"></script>
        <script src='https://cdn.firebase.com/v0/firebase.js'></script>
        <script src='vendors/angularfire.js'></script>
        

        <script type="text/javascript">
            var wecare = {};
            var app = angular.module("wecare", ["firebase"]);
            wecare.taskListController = function($scope, angularFire){
                $scope.taskItems = [];
                var taskRef = new Firebase("https://putcncx.firebaseIO.com/taskItems");
                angularFire(taskRef, $scope, "taskItems");
                $scope.msg = [];
                var msgRef = new Firebase("https://putcncx.firebaseIO.com/msg");
                angularFire(msgRef, $scope, "msg");
                
                $scope.toggleDoneFlag = function(taskItem){
                    taskItem.isDone = taskItem.isDone ? false : true;
                    var rewardStack = [{
                        imgsrc : "visual/images/u161_normal.png",
                        sound : "visual/sound/kiss.wav"
                    },
                    {
                        imgsrc : "visual/images/u163_normal.png",
                        sound : "visual/sound/kiss.wav"
                    },
                    {
                        imgsrc : "visual/images/u165_normal.png",
                        sound : "visual/sound/kiss.wav"
                    },
                    {
                        imgsrc : "visual/images/u168_normal.png",
                        sound : "visual/sound/kiss.wav"
                    }];

                    if(taskItem.isDone){
                        var rand = Math.floor((Math.random()*4)+0);
                        $scope.rewards.push(rewardStack[rand]);
                        if($scope.rewards.length>5){
                            $scope.rewards.shift();
                        }
                        $scope.playreward(rewardStack[rand]);
                    }

                }
            }

            wecare.patientInfoController = function($scope, angularFire){
                var msgRef = new Firebase("https://putcncx.firebaseIO.com/msg");
                angularFire(msgRef, $scope, "msg");
            }

            wecare.commentsController = function($scope, angularFire, $timeout){
                var commentsRef = new Firebase("https://putcncx.firebaseIO.com/comments");
                angularFire(commentsRef, $scope, "comments");
                $scope.comments = [];
                $scope.newComment = {
                    from : {
                        name : "Mark",
                        avatar : "visual/images/ming.jpg"
                    },
                    text : "",
                    time : "10/Aug",
                    mood : "happy",
                    thumbup : "0",
                    samehere : "0"
                }

                $scope.setMood = function(mood){
                    $scope.newComment.mood = mood;
                }
                $scope.sendComment = function(){
                    $scope.comments.push($scope.newComment);
                    $scope.newComment = {
                        from : {
                            name : "Mark",
                            avatar : "visual/images/ming.jpg"
                        },
                        text : "",
                        time : "10/Aug",
                        mood : "happy",
                        thumbup : "0",
                        samehere : "0"
                    }
                }
            }

            wecare.main = function($scope){
                $scope.rewards = [];
                $scope.menuShown = false;
                $scope.playreward = function(reward){
                    var audio = new Audio(reward.sound);
                    audio.play();
                }
                $scope.toggleMenu = function(){
                    $scope.menuShown = $scope.menuShown ? false : true;
                }
            }
        </script>
        
        <script src="app/main.js" type="text/javascript"></script>


    </head>

    <body ng-controller="wecare.main">
        <div class="cardsWrapper" ng-controller="wecare.main">
            <div class="planViewer card">
                <div class="patientOverView" ng-controller="wecare.patientInfoController">
                    
                    <table width="100%">
                        <tr>
                            <td>
                                Hey dad, don't forget to go to the hospital today!! love you &lt;3
                            </td>
                            <td width="110">
                                <img src="visual/images/u55_normal.png" width="110" height="110"/>
                            </td>
                            
                        </tr>
                    </table>
                    <div class="rewards">
                        <div class="reward" ng-repeat="reward in rewards">
                            <img ng-src="{{reward.imgsrc}}" ng-click="playreward(reward)" />
                        </div>
                    </div>
                </div>
                <div class="date">
                    10/28 Monday
                </div>
                <div class="taskList" ng-controller="wecare.taskListController">
                    <div class="activityItem" ng-repeat="taskItem in taskItems" ng-class="{'bio-item' : taskItem.isBio}" >
                        <table ng-click="toggleDoneFlag(taskItem)">
                            <tr>
                                <td class="img" v-align="center">
                                    <img ng-src="visual/images/{{taskItem.bioType}}.png" ng-show="taskItem.isBio" />
                                    <span ng-show="!taskItem.isBio">{{taskItem.time}}</span>
                                </td>
                                <td>
                                    {{taskItem.text}}
                                    <span ng-show="taskItem.isThumbup" class="thumbs-up"></span>
                                    <span ng-show="taskItem.isSmile" class="smile"></span>
                                </td>
                            </tr>
                        </table>
                        <div class="activityItemAttachment" ng-show="taskItem.showUtiliy">
                            <img  src="visual/images/u593_normal.png" ng-click="encourageBtnClicked(taskItem, 'thumbup')" />
                            <img  src="visual/images/happy.png" width="24" height="24" ng-click="encourageBtnClicked(taskItem, 'smile')" />
                            <div class="message">
                                <input ng-model="taskItem.note" />
                                <img  src="visual/images/u117_normal.png" ng-click="encourageBtnClicked(taskItem, 'audio')" />
                                <img  src="visual/images/u119_normal.png" ng-click="encourageBtnClicked(taskItem, 'video')" />
                            </div>
                        </div>
                        <div class="done" ng-show="taskItem.isDone"></div>
                    </div>
                </div>
                <div class="slideMenu">

                </div>
            </div>
            <div class="planCreator card" ng-controller="wecare.commentsController">
                <div class="comments">
                    <div class="comment" ng-repeat="comment in comments" ng-class="comment.mood">
                        <table>
                            <tr>
                                <td width="150" align="center">
                                    <img ng-src="{{comment.from.avatar}}" height="100"/>
                                </td>
                                <td>
                                    {{comment.text}}
                                </td>
                            </tr>
                        </table>
                        <div class="commentUtility">
                            <span>thumbup {{comment.thumbup}}</span>
                            <span>same here {{comment.samehere}}</span>
                        </div>
                    </div>    
                </div>
                <div class="commentInput" ng-class="newComment.mood">
                    <table width="100%">
                        <tr>
                            <td>
                                <input ng-model="newComment.text"/>
                            </td>
                            <td width="50">
                                <button ng-click="sendComment()">send</button>
                            </td>
                        </tr>
                    </table>
                    <table width="100%">
                        <tr>
                            <td ng-click="setMood('happy')">happy</td>
                            <td ng-click="setMood('unhappy')">unhappy</td>
                            <td ng-click="setMood('question')">question</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="popupmenu" ng-class="{'shown' : menuShown}">
                <table width="100%">
                    <tr>
                        <td align="left">
                            <img src="visual/images/u181_normal.png" />
                        </td>
                        <td align="right">
                            <img src="visual/images/menu_up_u187_normal.png" width="35" ng-click="toggleMenu()" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="30">
                            <img src="visual/images/u588_normal.png" />
                        </td>
                        <td align="left">
                            Get bio reading
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="30">
                            <img src="visual/images/u588_normal.png" />
                        </td>
                        <td align="left">
                           Get bio reading
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="30">
                            <img src="visual/images/u588_normal.png" />
                        </td>
                        <td align="left">
                            Get bio reading
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="30">
                            <img src="visual/images/u588_normal.png" />
                        </td>
                        <td align="left">
                            Get bio reading
                        </td>
                    </tr>
                    <tr>
                        <td colspan="100">
                            <img src="visual/images/ekg-learn2.png" /> Learn about it
                        </td>
                    </tr>
                    <tr>
                        <td colspan="100">
                            <img src="visual/images/EKG-novdev-small.png" /> Send to Doctor
                        </td>
                    </tr>

                </table>
            </div>
        </div>
    </body>
</html>
